.inner-content {
  background-color: #f8f8fa;
  padding: 20px 35px;
}
.container-grid {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  grid-template-rows: repeat(1, 12.2vh);
  min-height: 100px;
}

.box {
  min-height: 100px;
  min-width: 180px;
  background-color: bisque;
  color: #fff;
  padding: 10px 20px 0 20px;
}
.container-grid > .analyze {
  background-color: #87c5fe; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to right, #87c5fe , #a7b2fd);
}
.container-grid > .count {
  background-color: #ff8e68; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to right, #ff8e68 , #ffcd5d);
}
.container-grid > .monitor {
  background-color: #bc8cf0; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to right, #bc8cf0 , #f3bebb);
}
.container-grid > .message {
  background-color: #8c96f5; /* 不支持线性的时候显示 */
  background-image: linear-gradient(to right, #8c96f5 , #f2b9b1);
}

.head-title {
  font-size: 18px;
}
.head-bottom {
  margin-top: 25px;
  width: 100%;
  display: flex;
}
.head-bottom > .warning {
  position: relative;
}
.warning-num {
  position: absolute;
  top: -8px;
  left: 25px;
  background-color: red;
  width: 12px;
  height: 12px;
  border-radius: 6px;
  text-align: center;
  line-height: 12px;
  font-size: 12px;
  color:#fff;
  text-decoration: none;
}

.warning-num:hover {
  color:#fff;
  text-decoration: none;
}

.head-des {
  font-size: 12px;
  flex: 1;
}
.head-count {
  font-size: 22px;
  text-align: right;
  flex: 1;
}

.container-grid2 {
  display:flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin-top: 10px;
  min-height: 260px;
}

.container-grid2 > .flex-width {
  flex:1 1 0px;
}
.chart-area {
  background-color: #fff;
  min-width: 250px;
}

.container-grid3 > .chart-area {
  min-height: 260px;
}

.chart-title {
  width: 100%;
  font-size: 18px;
  border-left: 6px solid #87c5fe;
  line-height: 30px;
  margin-top: 10px;
  padding-left: 15px;
}
.chart-area .apm-tab {
  width: 150px;
  float: left;
}
.apm-tab-click {
  background-color: #87c5fe;
  color: #fff;
}
.more-site-apm {
  height: 80%;
  background-color: #999;
  width: 100%;
}
.chart-content {
  width: 100%;
  padding: 10px 20px;
}
.container-grid2 > .flex-chart {
  flex:1 1 400px;
}

.container-grid2 > .gas {
  width: 30px;
}

.kakuka-d-f {
  display: flex;
}
.kakuka-f-1 {
  flex: 1;
}
.kakuka-w-100 {
  width: 100%;
}
.kakuka-t-c {
  text-align: center;
}
.kakuka-m-t-30 {
  margin-top: 30px;
  min-height: 260px;
}
.kakuka-m-t-20 {
  margin-top: 20px;
}
.kakuka-m-t-10 {
  margin-top: 10px;
}
.kakuka-f-s-16 {
  font-size: 16px;
}
.chart-content-analyze {
  width: 90%;
  margin: 10px auto;
  /*background-color: silver;*/
  height: 27.5vh;
  min-height: 200px;
}
.container-grid3 {
  display: grid;
  grid-gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  grid-template-rows: repeat(1, 35vh);
  min-height: 260px;
}

.apm-area {
  display: flex;
  height: 40%;
  min-width: 200px;
  width: 70%;
  margin: 0 15%;
  justify-content: space-around;
  align-items: center;
}

.apm-area-item {
  width: 30px;
  height: 30px;
  border-radius: 2px;
  line-height: 30px;
  text-align: center;
  color: #fff;
  font-size: 20px;
}

.apm-area-item-bottom {
  width: 65px;
  height: 20px;
  line-height: 12px;
  text-align: left;
  color: #000;
}

.apm-area-item-bottom .item-inner {
  width: 12px;
  height: 12px;
  float: left;
  margin-right: 5px;
}

.apm-area-bottom {
  height: 15%!important;
  min-height: 50px;
  font-size: 12px;
  justify-content: space-between!important;
}

.apm-area .bg-fault {
  background-color: #f02d2d;
}
.apm-area .bg-charging {
  background-color: #ffd868;
}
.apm-area .bg-idle {
  background-color: #2e8ce6;
}
.apm-area .bg-offline {
  background-color: #999;
}

.icon-area {
  width: 15px!important;
  height: 15px!important;
  min-width: 20px!important;
  margin-left: 10px;
  background-size: 15px 15px;
  background-repeat: no-repeat;
}

.sidebar.menu-min .nav-list>li>a {
  padding: 10px 0;
}

.dropdown-toggle {
  line-height: 19px!important;
}

.icon-home {
  background-image: url('./image/icon/home.png');
}

.no-dropdown-toggle:hover > .icon-home, .open > .no-dropdown-toggle > .icon-home{
  background-image: url('./image/icon/home-click.png');
}

.icon-repair {
  background-image: url('./image/icon/repair.png');
}

.dropdown-toggle:hover > .icon-repair, .open > .dropdown-toggle > .icon-repair {
  background-image: url('./image/icon/repair-click.png');
}

.icon-charge {
  background-image: url('./image/icon/charge.png');
}

.dropdown-toggle:hover > .icon-charge, .open > .dropdown-toggle > .icon-charge {
  background-image: url('./image/icon/charge-click.png');
}

.icon-order {
  background-image: url('./image/icon/order.png');
}

.dropdown-toggle:hover > .icon-order, .open > .dropdown-toggle > .icon-order {
  background-image: url('./image/icon/order-click.png');
}

.icon-client {
  background-image: url('./image/icon/client.png');
}

.dropdown-toggle:hover > .icon-client, .open > .dropdown-toggle > .icon-client {
  background-image: url('./image/icon/client-click.png');
}

.icon-set {
  background-image: url('./image/icon/set.png');
}

.dropdown-toggle:hover > .icon-set, .open > .dropdown-toggle > .icon-set {
  background-image: url('./image/icon/set-click.png');
}

.icon-work-order {
  background-image: url('./image/icon/work-order.png');
}

.dropdown-toggle:hover > .icon-work-order, .open > .dropdown-toggle > .icon-work-order {
  background-image: url('./image/icon/work-order-click.png');
}

.user-icon {
  padding: 10px 0;
  float: left;
}
